<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<script src="js/elementui.js"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<!--axios用向前端发送请求-->
		<script src="js/axios.min.js"></script>
		<script src="js/common.js"></script>
		<title></title>
	</head>
	<body>
		<div id="box">
			<el-input  placeholder="请输入搜索角色" style="width: 200px;"></el-input>
			<el-button type="primary" size="mini">搜索</el-button>
			<el-button type="success" size="mini" type="text" @click="openChild">添加角色</el-button>
			
			<template>
			  <el-table
				size="mini"
			    :data="rolelist"
			    border
			    style="width: 100%">
			    <el-table-column
			      prop="id"
			      label="id"
			      width="180">
			    </el-table-column>
			    <el-table-column
			      prop="rolename"
			      label="rolename"
			      width="180">
			    </el-table-column>
			    <el-table-column
			      prop="description"
			      label="description">
			    </el-table-column>
				<el-table-column label="操作" >
					<template slot-scope="scope" >
						<el-button type="success" size="mini" type="text" @click="upd(scope.row)">编辑</el-button>
						<el-button type="success" size="mini" type="text" @click="open(scope.row)">编辑角色菜单</el-button>
						<el-button size="mini" type="text" @click="del(scope.row.id)">删除</el-button>
					</template>	
				</el-table-column>
			  </el-table>
			</template>
			
			<el-dialog title="增加角色" :visible.sync="dialogFormVisible">
			  <el-form :model="formAdd">
			    <el-form-item label="rolename" label-width="80px">
			      <el-input v-model="formAdd.rolename" autocomplete="off"></el-input>
			    </el-form-item>
				<el-form-item label="description" label-width="90px">
				  <el-input v-model="formAdd.description" autocomplete="off"></el-input>
				</el-form-item>
				
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="addSubmit">确 定</el-button>
			  </div>
			</el-dialog>
			
			
			<el-dialog title="修改角色" :visible.sync="dialogFormVisible2">
			  <el-form :model="formUpd">
			    <el-form-item label="rolename" label-width="80px">
			      <el-input v-model="formUpd.rolename" autocomplete="off"></el-input>
			    </el-form-item>
				<el-form-item label="description" label-width="90px">
				  <el-input v-model="formUpd.description" autocomplete="off"></el-input>
				</el-form-item>
				
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
			    <el-button type="primary" @click="updSubmit">确 定</el-button>
			  </div>
			</el-dialog>
			
			<el-drawer
			  title="角色菜单维护"
			  :visible.sync="drawer"
			  :with-header="false">
			 <!-- <span>{{menuList}}</span> -->
				<el-button size="mini" @click="addRoleMenu">添加菜单</el-button>
			  <el-tree
				ref="tree"
			    :data="menuList"
			    show-checkbox
				:check-strictly="true"
				@check="trunCheck"
			    default-expand-all
			    node-key="id"
			    highlight-current
			    >
			  </el-tree>
			</el-drawer>
		</div>
	</body>
	<script>
		new Vue({
			el:"#box",
			data:{
				nowRoleId:0,
				drawer:false,
				formAdd:{
					rolename:"",
					description:""
				},
				formUpd:{
					rolename:"",
					description:""
				},
				dialogFormVisible:false,
				dialogFormVisible2:false,
				rolelist:[],
				menuList:[]
			},
			methods:{
				initList() {
					axios.get(API+"allRole").then(res=> {
							console.log(res.data)
							this.rolelist=res.data.data.list
							console.log(res.data.data.list)

						}).catch(err => {
						console.log(err)
					});
				},
				openChild(id){
					//this.formAdd.parentid=id
					this.dialogFormVisible=true
					
					//console.log(id)
				},
				addSubmit(){
					this.dialogFormVisible=false
					console.log(this.formAdd)
					axios.post(API+"addRole",this.formAdd).then(res=> {
							alert(res.data)
							this.formAdd=[]
							this.initList()
						}).catch(err => {
						console.log(err)
					});
				},
				upd(row){
					this.dialogFormVisible2=true
					this.formUpd=row
					console.log(this.formUpd)
				},
				updSubmit(){
					axios.post(API+"updRole",this.formUpd).then(res=> {
							alert(res.data)
							this.dialogFormVisible2=false
						}).catch(err => {
						console.log(err)
					});
				},
				del(id){
					axios.get(API+"delRole?id="+id).then(res=> {
							alert(res.data)
							this.initList()
						}).catch(err => {
						console.log(err)
					});
				},
				open(row) {
					this.nowRoleId=row.id
					this.drawer=true
					axios.get(API+"selectRoleMenuByRoleId?roleId="+row.id).then(res=> {
							console.log(res.data)
							// let arr=arrayToTree(res.data.data.list)
							// this.menuList=arr
							//console.log(res.data.data.list)
							const arr=res.data.data.list.map((obj)=>obj.menuid)
							 this.$refs.tree.setCheckedKeys(arr);
						}).catch(err => {
						console.log(err)
					});
				},
				addRoleMenu(){
					let treeArr=this.$refs.tree.getCheckedKeys();//获得所有选中的key
					axios.post(API+"updateRoleMenu",{
						roleid:this.nowRoleId,
						listMenu:treeArr
					}).then(res=> {
							alert(res.data)
						}).catch(err => {
						console.log(err)
					});
				},
				initList2() {
					axios.get(API+"allMenu2").then(res=> {
							console.log(res.data)
							let arr=arrayToTree(res.data.data.list)
							this.menuList=arr
							//console.log(res.data.data.list)
				
						}).catch(err => {
						console.log(err)
					});
				},
				trunCheck(a,b){
					let treeArr=this.$refs.tree.getCheckedKeys();//获得所有选中的key
					//console.log(treeArr);
					treeArr.push(a.parentid);
					//this.$refs.tree.setCheckedKeys(treeArr);
					if(a.children!=null){
						const childIdArr = a.children.map((obj) => obj.id)
						//console.log(childIdArr)
						treeArr=treeArr.filter(item => !childIdArr.includes(item))
					}
					this.$refs.tree.setCheckedKeys(treeArr);
				}
			},
			mounted() {
				this.initList()
				this.initList2()
			}
		})
	</script>
</html>